import { Meta, Status, Props, Story } from '../../../../.storybook/components';
import * as Stories from './NotificationFullscreen.stories';

<Meta of={Stories} />

# NotificationFullscreen

<Status variant="stable" />

The NotificationFullscreen component provides important information or feedback as part of a process flow.

<Story of={Stories.Base} inline={false} />
<Props />

## When to use it

- As a confirmation/success screen.
- As an empty screen state.
- As an error screen.

## Usage guidelines

- Use a concise headline to communicate your message.
- Render an `h1` headline instead of the default `h2` if there is no other `h1` on the page (see "Accessibility" below).
- When necessary, an optional body copy and actions (anchors or buttons) can be rendered.
- The maximum width of the NotificationFullscreen is 420px, to optimize readability of the text.
- The positioning of the action buttons follows the guidelines of the [ButtonGroup](Components/Button/ButtonGroup) component.
- The image asset has a fixed height of 160px, and a maximum width of 280px.

## Accessibility

By default, the NotificationFullscreen component renders an `h2` heading element. This assumes that the component is rendered as part of a broader heading structure, on a page that already has a parent `h1` heading element.

However, the component may also be used in isolation, for example for full-screen error pages. In this case, in order to maintain an accessible heading hierarchy, the NotificationFullscreen's headline should be rendered as an `h1`. This can be done by passing the `headline` prop as an object with the `as: "h1"` property.

<Story of={Stories.WithHeading1} />
